<template>
	<div class="theme">
		<van-nav-bar left-arrow @click-left="$router.back(-1)"></van-nav-bar>
		<div class="overlay headTop">
			<div class="overlay-content scrolling">
				<div class="myShare-title">
					<div class="myShare-title-tab">
						<div class="tab-on">我的参与</div>
					</div>
				</div>
				<div class="myShare-content">
					<div class="myShare-content-card">
						<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
							<van-list v-model="loading" :finished="finished" @load="onLoad" :finished-text="noDate">
								<div class="myShare-content-card-list" @click="toDeatil(el)" v-for="(el,i) in list" :key="i">
									<van-cell :title="'算池编号：' + el.countPoolCode" is-link></van-cell>
									<div class="card-content">
										<van-progress :percentage="parseFloat((el.packageNum - el.remainingNum) / el.packageNum * 100).toFixed(3).slice(0,-1)" color="#ff4646" stroke-width="4px" :pivot-text="el.packageNum - el.remainingNum == 0 ? '' : el.packageNum - el.remainingNum" />
										<div>
											<van-row type="flex" justify="center" align="center" style="text-align: center;">
												<van-col span="12">
													<p>周期</p>
													<p v-text="el.cycle + '天'"></p>
												</van-col>
												<van-col span="12">
													<p>状态</p>
													<p class="red" v-text="formatStatus(el.status)">进行中</p>
												</van-col>
											</van-row>
										</div>
									</div>
								</div>
							</van-list>
						</van-pull-refresh>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { home } from './../utils/api';
	export default {
		name: 'MySharePool',
		components: {},
		props: {},
		data() {
			return {
				list: [],
				tab: true,
				orderShow: false,
				showKeyboard: false,
				num: '',
				password: '',
				checked: '',
				listShow: true,
				size: 10, //每页数量
				total: '', //总数量
				listLength: '', //当前总数量
				isLoading: false,
				finished: false,
				loading: false,
				noDate: '没有更多了',
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			onRefresh() { // 下拉刷新
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
					this.getList();
				}, 500);
			},
			onLoad() { // 上拉加载
				// 异步更新数据
				this.getList();
			},
			getList() {
				home.getSharedPools({
					current: 1,
					size: this.size,
					type: 2,
				}).then(res => {
					if(res.code == 200) {
						this.list = res.data.records;
						if(this.list == '') {
							this.noDate = '暂无数据';
						}
						this.listLength = res.data.records.length;
						this.total = res.data.total;
						if(this.total > this.listLength) {
							this.size += 10;
							this.loading = false;
						} else {
							// 加载状态结束
							this.finished = true;
							this.loading = false;
						}
					}
				})
			},
			toDeatil(el) {
				if(Number(el.status) > 2) {
					this.$router.push({
						name: 'SharePoolSettlement',
						params: {
							'countSharedPoolId': el.id,
							'countPoolCode': el.countPoolCode,
							'status': el.status
						}
					})
				} else {
					this.$router.push({
						name: 'SharePoolDetails',
						params: {
							'countSharedPoolId': el.id,
							'countPoolCode': el.countPoolCode,
							'status': el.status
						}
					})
				}
			},
			stringToTime(str) {
				let time = new Date(str)
				var y = time.getFullYear()
				var m = time.getMonth() + 1
				var d = time.getDate()
				var h = time.getHours()
				var mm = time.getMinutes()
				var s = time.getSeconds()
				return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + time.toTimeString().substr(0, 8)
			},
			formatStatus(status) {
				switch(Number(status)) {
					case 1:
						return '待打包';
						break;
					case 2:
						return '打包中';
						break;
					case 3:
						return '打包成功';
						break;
					case 4:
						return '打包失败';
						break;
					case 5:
						return '已完成';
						break;
				}
			}
		},
		created() {},
		mounted() {},
		destroyed() {

		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
			}
		}
	};
</script>

<style lang="less" scoped>
	.overlay-content {
		padding: 0px 10px 10px;
		.myShare-title {
			font-size: 15px;
			color: #FFFFFF;
			border-bottom: 1px solid #f4b56b;
			padding-bottom: 20px;
			.tab-on {
				background: #f4b56b !important;
			}
			div {
				display: inline-block;
				padding: 5px 13px;
				border-radius: 5px;
			}
		}
		.myShare-content {
			padding: 20px 0px;
			.myShare-content-card {
				/deep/ .van-cell {
					padding: 0;
				}
				.van-cell:not(:last-child)::after {
					border-bottom: 0;
				}
				.myShare-content-card-list {
					box-shadow: 1px 1px 10px 0px #e8e7e7;
					border-radius: 5px;
					padding: 10px 16px;
					margin-bottom: 15px;
					.card-content {
						margin-top: 10px;
						.van-row {
							padding-bottom: 10px;
							.van-col {
								p:first-child {
									color: #999999;
									padding: 20px 0;
								}
							}
							.red {
								color: #fc6c6b;
							}
						}
					}
				}
			}
		}
	}
	
	/deep/ .van-nav-bar {
		background-color: #FFFFFF;
	}
	
	/deep/ .van-nav-bar .van-icon {
		color: #999999;
	}
	
	/deep/ .van-nav-bar__arrow {
		font-size: 18px;
	}
	
	.van-hairline--bottom::after {
		border-bottom-width: 0px;
	}
	
	.van-nav-bar__left {
		left: 8px;
	}
	
	.van-pull-refresh {
		overflow: visible!important;
	}
	
	.van-cell--clickable:active {
		background: transparent;
	}
</style>